<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="titlepage">
				<h2>订单信息</h2>
			</div>
		</div>
	</div>
</div>
<div class="brand-bg">
	<div class="container">
		<div class="row">
			<div class="col-md-12 order-address">
				<div class="select-address">
					<span>订单信息</span>
					<a href="javascript:void(0);" id="selectaddr" data-toggle="modal" data-target="#address-list">
						[切换地址]
					</a>
				</div>
				<p class="hidden-val"></p>
				<div id="order-name">收货人:<span>[请选择]</span></div>
				<div id="order-phone">联系电话:<span>[请选择]</span></div>
				<div id="order-addr">收货地址:<span>[请选择]</span></div>
			</div>
			<div class="col-md-12 order-bg">
				<div><span>商品列表</span></div>
				<form class="main_form">
					<div class="row">
						<table class="order-item-list col-md-12">
							<thead>
							<tr>
								<th>序号</th>
								<th>商品图片</th>
								<th>商品名称</th>
								<th>规格</th>
								<th>单价</th>
								<th>数量</th>
							</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
						<div class="order-button-list col-md-12">
							<div class="total">总价：<span>0.00</span> 元</div>
							<button type="button" class="btn btn-success">提交订单</button>
							<button type="button" class="btn btn-danger">返回购物车</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
	$(function (){
		$("#selectaddr").click(function (){
			$(".modal-footer").css("display","flex");
		});
		$(".order-button-list .btn-danger").click(function (){
			let url="/ruoyi/cart";
			jumphtml(url);
		});
		$(".order-button-list .btn-success").click(function (){
			if ($(".order-address .hidden-val").text()===""){
				alert("请选择地址!");
				return ;
			}
			let addrId = $(".order-address .hidden-val").text();
			let addName = $("#order-name span").text();
			let phone = $("#order-phone span").text();
			$("#mainContentId").data("success",{"addName":addName,"phone":phone});
			let total = $("#mainContentId").data("cartData").total;

			let params = {"total":total,"addrId":addrId};
			let url=`/ruoyi/order/saveorder`;
			$.ajax({
				url:url,
				type:"post",
				data:params,
				dataType: "json",
				success(result) {
					if (result.status===200){
						url="/ruoyi/success";
						jumphtml(url);
					}
				},
				error(){
					alert("请求失败，请稍后重试");
				}
			});

		});
		$("#submitaddr").click(function (){
			let address = $("input[name='address']:checked").parent(".address-select").data("address");
			$(".order-address .hidden-val").text(address.addrId);
			$("#order-name span").text(address.addrName);
			$("#order-phone span").text(address.phone);
			$("#order-addr span").text(address.address);
			$(".address-select").children("input[name='address']").prop("checked",false);
			$("#submitaddr").addClass("disabled");
		});

		doGetCartItems();
	});


	function doGetCartItems(){
		let cartDatas = $("#mainContentId").data("cartData").carts;
		let tobody = $(".order-item-list tbody");
		tobody.empty();
		for (let i=0;i<cartDatas.length;i++){
			let tr = $("<tr></tr>");
			tr.append(doCreateOrderItems(i+1,cartDatas[i]));
			tobody.append(tr);
		}
		$(".total span").text($("#mainContentId").data("cartData").total);
	}
	function doCreateOrderItems(i,orderitems){
		return `<td>${i}</td>
				<td><img src="${orderitems.image}"></td>
				<td>${orderitems.title}</td>
				<td>${orderitems.sizeName}</td>
				<td>${orderitems.price}</td>
				<td>${orderitems.num}</td>`;
	}
</script>